<script setup lang="ts" name="Demo">
import { ref, reactive } from "vue";

const activeName = ref("b")

const tabList = ref([
  "12-1",
  "12-2",
  "12-3",
  "12-4",
  "12-5",
  "12-6",
  "12-7",
])

const activeIds = ref([1]);
const activeIndex = ref(0);
const romeTimeList = reactive([
  {
    text: "F3-05",
    children: [
      {
        text: "12:00 - 12:40",
        id: 1
      },
      {
        text: "12:00 - 12:40",
        id: 2
      }
    ],
    badge: 1,
  },
  {
    text: "F4-07",
    children: [
      {
        text: "13:00 - 13:40",
        id: 3
      },
      {
        text: "14:00 - 14:40",
        id: 4
      }
    ],
    badge: 0,
  }
])

const idRoomMap = reactive({
  1: "F3-05",
  2: "F3-05",
  3: "F4-07",
  4: "F4-07"
})

function changeNav(index) {
  activeIndex.value = index
}

function changeItem(item) {
  console.log(item)
  if (activeIds.value.includes(item.id)) {
    activeIds.value = activeIds.value.filter(ele => ele !== item.id)

    // 徽标减少
    let roomId = idRoomMap[item.id]
    romeTimeList.map(ele => {
      if (ele.text === roomId) {
        ele.badge--;
      }
    })

  } else {
    activeIds.value.push(item.id)
    // 徽标增加
    let roomId = idRoomMap[item.id]
    romeTimeList.map(ele => {
      if (ele.text === roomId) {
        ele.badge++;
      }
    })
  }
}

</script>

<template>
  <div class="order-content px-[12px]">
    <van-tabs :active="activeName">
      <van-tab v-for="(item, index) in tabList" :title="item" :name="item">
        <van-tree-select
          :active-id="activeIds"
          :main-active-index="activeIndex"
          :items="romeTimeList"
          @click-nav="changeNav"
          @click-item="changeItem"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
